<template>
  <div>
    <el-card>
      <el-form class="pageQuery" label-position="top" >
        <div class="queryItem" v-for="(queryItem, index) in queryItem" :key="index">
          <el-form-item :label="queryItem.label">
            <el-input v-if="queryItem.inputType == 'input'" :placeholder="queryItem.placeholder"
              v-model="queryInfo[queryItem.model]"></el-input>

            <el-select v-if="queryItem.inputType == 'select'" :placeholder="queryItem.placeholder"
              v-model="queryInfo[queryItem.model]">
              <el-option v-for="(item, index) in  option[queryItem.option]" :key="index" :label="item.name"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button @click="getListData" type="primary">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <div class="tableButton">
        <el-button type="success" @click="addButton" v-if="$api.buttonPower(83)">商户创建</el-button>
      </div>
      <el-table :data="listData" v-loading="loading">
        <el-table-column v-for="(tableItem, index) in tableItem" :key="index" :label="tableItem.label" :prop="tableItem.prop">
          <template slot-scope="scope">
            <div v-html="$api.status.status(scope.row.status, option[Enum.DicTypeStatus])" v-if="tableItem.prop == 'status'"></div>
            <div v-else>{{ scope.row[tableItem.prop] }}</div>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="150" :show-overflow-tooltip="false">
          <template slot-scope="scope">
            <div class="table-operation">
              <el-button  v-if="$api.buttonPower(84)" type="text" @click="detailOpen(scope.row)">查看</el-button>
            </div>
          </template>
        </el-table-column>

        <template slot="empty">
          <myEmpty></myEmpty>
        </template>
      </el-table>

      <!-- 分页 -->
      <myPaging :queryInfo="queryInfo" :getListData="getListData"></myPaging>
    </el-card>

    <addAdmin @submitSuccess="getListData()" ref="addAdminDialog"></addAdmin>
    <el-drawer title="商户详情" :visible.sync="detail_box.show" size="50%">
      <iot-merchant-detail v-if="detail_box.show" :request="detail_box.request" @close="detailClose"></iot-merchant-detail>
    </el-drawer>


  </div>
</template>

<script>
import IotMerchantDetail from "@/components/business/tenant/administratorDetail";
export default {
  components: {IotMerchantDetail},
  data() {

    return {
      queryInfo: {
        page: 1,
        size: 10,
        total: 0
      },
      listData: [],
      option: [],
      queryItem: [
        {
          inputType: 'input',
          model: 'account',
          placeholder: '请输入账户号',
          label: '账户',
        },
        {
          inputType: 'input',
          model: 'username',
          placeholder: '请输入用户名',
          label: '用户名',
          option: ''
        },
        {
          inputType: 'select',
          model: 'status',
          placeholder: '请选择状态',
          label: '状态',
          option: this.Enum.DicTypeStatus
        },
      ],
      tableItem: [
        {
          label: '账户',
          prop: 'account'
        },
        {
          label: '用户名',
          prop: 'username'
        },
        {
          label: '角色等级',
          prop: 'level_name'
        },
        {
          label: '状态',
          prop: 'status'
        },
        {
          label: '性别',
          prop: 'sex_name'
        },
        {
          label: '余额',
          prop: 'balance'
        }
      ],
      loading: false,
      detail_box:{
        show: false,
        request: {
          id:0
        },
      }
    };
  },
  mounted() {
    this.getListData();
    this.$api.foundation.dicListExtendCache([
      this.Enum.DicTypeStatus,
      this.Enum.DicTypeSex,
    ], '', res => {
      this.option = res
    })
    this.$api.power(this.queryItem, this.tableItem, res => {
      this.queryItem = res.queryItem
      this.tableItem = res.tableItem
    })
  },
  methods: {
    getListData() {
      this.loading = true
      this.$api.merchant.merchantList(this.queryInfo, res => {
        if (res.status) {
          this.listData = res.data.list;
          this.queryInfo.total = res.data.page.total;
          this.loading = false
        } else {
          this.$message.error(res.message);
        }
      });
    },
    detailOpen(row) {
      this.detail_box.show = true
      this.detail_box.request.id = row.id
    },
    detailClose(e) {
      this.detail_box.show = false
      if (e.is_change){
        this.getListData()
      }
    },
    addButton() {
      this.$refs.addAdminDialog.dialog = true;
    },
    changeStatus(row) {
      if (row.status === false) {
        row.status = true;
        this.$confirm("确定停用该账户?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
            row.status = false;
            this.$api.merchant.changeStatus(
              { id: row.id, status: row.status === false ? this.Enum.StatusDisable : this.Enum.StatusActive },
              res => {
                if (res.status) {
                  this.getListData();
                  this.$message({
                    type: "success",
                    message: "停用成功!"
                  });
                } else {
                  this.$message.error(res.message);
                  this.getListData();
                }
              }
            );
          })
          .catch(() => { });
      } else {
        this.$api.merchant.changeStatus(
          { id: row.id, status: row.status === false ? this.Enum.StatusDisable : this.Enum.StatusActive },
          res => {
            if (res.status) {
              this.$message.success("状态已激活");
              this.getListData();
            } else {
              this.$message.error(res.message);
              this.getListData();
            }
          }
        );
      }
    },
    sexClass(sex) {
      let sexClass = ''
      this.option[this.Enum.DicTypeSex].forEach(element => {
        if (element.id == sex) {
          if (element.id == 1) {
            sexClass = 'iconfont icon-xingbienan'
          } else if (element.id == 2) {
            sexClass = 'iconfont icon-xingbienv'
          } else if (element.id == 3) {
            sexClass = 'iconfont icon-Collection'
          }
        }
      })
      return sexClass
    }
  }
};
</script>

<style lang="less" scoped>
.listButton .el-button {
  margin: 5px 10px 5px 0;
}

.iconfont {
  font-size: 18px;
}
.tableButton {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
</style> 